<template>
	<div class="sendRecord">
		<header>分发记录</header>
		<div class="contents">
			<div class="conditions">
				<div class="condition_1">
					<div class="market_type">
						<span>选择日期：</span>
						<el-date-picker v-model="value1" type="datetimerange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
					</div>
					<div class="status">
						<span>状态：</span>
						<el-select v-model="value2" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
					<el-button @click.native="resets">重置</el-button>
				</div>
				<div class="selected" v-if="tableDatas.length>0">
					<p>
						<img src="../../assets/images/market/select2.png" alt="" />
						<span>共&nbsp;
							<label>{{tableDatas.length}}</label>&nbsp;条记录</span>
					</p>
				</div>
				<div class="tables">
					<el-table v-loading="loading" :data="actList" style="width: 100%">
						<el-table-column prop="SUBJECT" label="优惠券名称" width="180"> </el-table-column>
						<el-table-column prop="CATEGORY" label="优惠券类型" width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.CATEGORY==1">满减券</span>
								<span v-if="scope.row.CATEGORY==2">兑换券</span>
								<span v-if="scope.row.CATEGORY==3">服务券</span>
								<span v-if="scope.row.CATEGORY==4">N元券</span>
								<span v-if="scope.row.CATEGORY==5">折扣券</span>
							</template>
						</el-table-column>
						<el-table-column prop="USERANGE" label="适用范围" width="350"> </el-table-column>
						<el-table-column prop="PUSHTIME" label="分发时间" width="150">
							<template slot-scope="scope">
								<span v-if="scope.row.PUSHTIME">{{ scope.row.PUSHTIME | filterTimes }}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="STARTDATE" label="有效日期" width="180">
							<template slot-scope="scope">
								<span v-if="scope.row.STARTDATE&&scope.row.EXPDATE">{{scope.row.STARTDATE|filterTimes}}~{{scope.row.EXPDATE|filterTimes}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="STATUS" label="状态" width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.STATUS==1" style="display:flex;align-items:center;justify-content:center;">
									<img src="../../assets/images/market/dot_green.png" width="16" heigth="16" alt="" />启用 </span>
								<span v-if="scope.row.STATUS==0" style="display:flex;align-items:center;justify-content:center;">
									<img src="../../assets/images/market/dot_red.png" width="16" heigth="16" alt="" />停用 </span>
							</template>
						</el-table-column>
						<el-table-column prop="CREATOR" label="分发人" width="100"> </el-table-column>
						<el-table-column prop="NUMBERR" label="发放张数" width="100">
							<template slot-scope="scope">
								<span class="giveout_sum" @click="showMumber(scope.row.CASHVOLUMERECORDID)">{{ scope.row.NUMBERR }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="USED" label="使用张数" width="100"> </el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
				</div>
			</div>
		</div>
		<!--发送张数的所有会员-->
		<el-dialog title="发送会员账号" :visible.sync="dialog1" width="35%">
			<div class="dialog_box" v-loading="loading2">
				<div class="dialog_datas" v-if="allData.length>0">
					<div class="dialog_data" v-for="(item,index) in allData">
						<span>{{allData[index]}}</span>
					</div>
				</div>
				<div class="no_dialog_datas" v-if="allData.length==0">暂无数据</div>
				<div class="dialog_btn">
					<el-button @click.native="dialog1=false">取消</el-button>
					<el-button @click.native="dialog1=false" type="danger" style="background:#e7251a;">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { getIssueCashVolumeRecordList } from '@/api/coupon'
	import { getIssuePhone } from '@/api/coupon'
	import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
	export default {
		name: 'sendRecord',
		data() {
			return {
				value1: '', //选择日期	  
				pickerOptions1: dateSelect,
				value2: '', //状态
				options2: [{
					value: 1,
					label: '启用'
				}, {
					value: 0,
					label: '停用'
				}],
				tableDatas: [],
				currentPage4: 1,
				dialog1: false, //是否显示dialog
				allData: [], //发送张数的所有会员数据
				loading: true,
				page1: 1, //当前页数
				pageSize1: 6, //每页多少条
				loading2: true,
			}
		},
		computed: {
			//请求参数
			objs() {
				let obj = {};
				obj.PAGE_NO = this.page1; //页码
				obj.PAGE_SIZE = this.pageSize1; //每页多少条  		
				if(this.value2 === 0 || this.value2 === 1) {
					obj.STATUS = this.value2; //状态 1-启用 0-停用
				}
				if(this.value1.length > 0) {
					obj.STARTTIME = this.value1[0].getTime(); //有效开始时间
					obj.EXPTIME = this.value1[1].getTime(); //有效结束时间
				}
				return obj;
			},
			//发送记录列表
			listDatas() {
				this.loading = true;
				//分发记录列表
				getIssueCashVolumeRecordList(this.objs).then(res => {
					if(res.data.STATUS_CODE === 1) {
						this.loading = false;
						this.tableDatas = res.data;
					}
				})
			},
			//分页数据
			actList() {
				this.listDatas;
				if(this.tableDatas.ISSUECASHVOLUMEARR) {
					return this.tableDatas.ISSUECASHVOLUMEARR;
				}
			}
		},
		created() {
			this.listDatas;
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize1 = val;
			},
			handleCurrentChange(val) {
				this.page1 = val;
			},
			//发送张数的所有会员
			showMumber(id) {
				this.dialog1 = true;
				this.loading2 = true;
				getIssuePhone(id).then(res => {
					if(res.data.STATUS_CODE === 1) {
						this.loading2 = false;
						this.allData = res.data.PHONES.split('、');
					}
				})
			},
			//查询
			querys() {
				this.listDatas;
			},
			//重置
			resets() {
				this.value1 = this.value2 = '';
			},
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.sendRecord {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			width: 97%;
			margin: 25px auto;
			padding: 25px;
			background: #fff;
			.conditions {
				span {
					white-space: nowrap;
				}
				.condition_1 {
					display: flex;
					margin-bottom: 25px;
					.status {
						margin: 0 35px;
					}
				}
				.selected {
					margin-top: 15px;
					border: 1px solid #f0f0f0;
					border-radius: 5px;
					background: #fafafa;
					p {
						display: flex;
						align-items: center;
						img {
							width: 20px;
							height: 20px;
							margin: 0 10px;
						}
						span {
							font-size: 16px;
							color: #717a7d;
							label {
								color: #e7251a;
							}
						}
					}
				}
				.tables {
					margin-top: 15px;
					.el-pagination {
						text-align: center;
						margin-top: 30px;
					}
					.editStatus, .edits {
						color: #1d93ff;
						cursor: pointer;
						margin: 0 2px;
						&:hover {
							text-decoration: underline;
						}
					}
					.giveout_sum {
						color: #1d93ff;
						font-size: 16px;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.dialog_box {
			border-top: 1px solid #f0f0f0;
			.dialog_datas {
				border-top: 1px solid #f0f0f0;
				border-bottom: 1px solid #f0f0f0;
				padding: 30px 0;
				box-sizing: border-box;
				max-height: 400px;
				overflow-y: auto;
				display: flex;
				flex-flow: wrap;
				.dialog_data {
					margin-left: 20px;
					color: #989898;
				}
			}
			.no_dialog_datas {
				text-align: center;
				margin-top: 20px;
			}
			.dialog_btn {
				display: flex;
				justify-content: flex-end;
				padding: 15px 30px 0 0;
			}
		}
	}
</style>